<template>
  <div class="tinysale-about">
    <div class="tinysale-about-header">微营销课程只能通过手机号购买，建议网站账号开启绑定手机号，避免出现多账号问题。</div>
    <el-row :gutter="20" class="tinysale-about-tip">
      <el-col v-for="(item,index) in listData" :key="index" :span="6">
        <div class="grid">
          <div :style="item.style" class="grid-img">
            <i :class="item.icon"/>
          </div>
          <div class="grid-content">
            <span class="grid-content-title">{{ item.number }}</span>
            <span class="grid-content-subtitle">{{ item.title }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="search-wrap">
      <el-select v-model="searchSelect" style="width:150px;" @change="handleChange">
        <el-option
          v-for="item in searchOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-date-picker
        :picker-options="pickerOptions"
        v-model="searchDate"
        type="daterange"
        align="center"
        unlink-panels
        range-separator="|"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="getData"
      />
    </div>

    <line-chart :options="options" width="100%" height="450px" class-name="line-chart"/>
  </div>
</template>

<script>
import LineChart from '@/components/Charts/lineMarker'
import { getTinySaleStatistic } from '@/api/tinysale/addActivity'
export default {
  components: {
    LineChart
  },
  data() {
    return {
      searchSelect: 'openNum',
      searchDate: '',
      searchOptions: [
        {
          label: '曝光次数',
          value: 'openNum'
        },
        {
          label: '成单数',
          value: 'orderNum'
        },
        {
          label: '订单金额',
          value: 'orderPrice'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      activityNum: 0,
      openNum: 0,
      orderNum: 0,
      orderPrice: 0,
      listData: [],
      dataArray: [],
      dateArray: [],
      options: {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          top: 20,
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [''],
          right: '1%',
          textStyle: {
            fontSize: 14,
            color: '#F1F1F3'
          }
        },
        grid: {
          top: 50,
          left: 0,
          right: '1%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#8a8a8a'
            }
          },
          data: this.dateArray
        }],
        yAxis: [{
          type: 'value',
          name: '曝光次数',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              // color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              show: false,
              color: '#8a8a8a'
            }
          }
        }],
        series: [
          {
            name: '统计',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              show: false
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12
              }
            },
            data: this.dataArray
          }
        ]
      }
    }
  },
  created() {
    this.handleChange()
    this.getData()
  },
  methods: {
    getData() {
      const params = {}
      if (this.searchDate) {
        params.startDate = this.searchDate[0]
        params.endDate = this.searchDate[1]
      }
      params.type = this.searchSelect
      getTinySaleStatistic(params).then(res => {
        this.activityNum = res.data.activityNum
        this.openNum = res.data.openNum
        this.orderNum = res.data.orderNum
        this.orderPrice = res.data.orderPrice
        this.dateArray = res.data.dateArray
        this.dataArray = res.data.dataArray
        this.initListData()
      })
    },
    handleChange() {
      this.options.yAxis[0].name = this.searchOptions.filter(item => {
        if (item.value === this.searchSelect) return true
      })[0].label
      this.getData()
    },
    initListData() {
      this.listData = [
        {
          number: this.activityNum,
          title: '总活动数',
          icon: 'el-icon-date',
          style: { backgroundColor: '#58b7ff' }
        },
        {
          number: this.openNum,
          title: '曝光次数',
          icon: 'el-icon-view',
          style: { backgroundColor: '#ffa534' }
        },
        {
          number: this.orderNum,
          title: '成功订单',
          icon: 'el-icon-goods',
          style: { backgroundColor: '#13ce66' }
        },
        {
          number: this.orderPrice,
          title: '订单金额',
          icon: 'el-icon-printer',
          style: { backgroundColor: '#ff4949' }
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.tinysale-about {
  padding: 0 20px;
  &-header {
    font-size: 15px;
    color: #409eff;
    padding: 20px;
    background: #ebf4ff;
    margin:20px 0 10px 0;
  }
  .line-chart {
    padding: 0 20px;
    margin-top: 20px;
  }
  .search-wrap {
    padding: 30px;
  }
  &-tip {
    .grid {
      height: 76px;
      width: 100%;
      margin-top: 5px;
      background: #fff;
      border-radius: 4px;
      min-width: 240px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(63, 63, 68, 0.1);
      &-img {
        height: 76px;
        width: 72px;
        background-color: #737373;
        margin-right: 10px;
        font-size: 30px;
        text-align: center;
        line-height: 76px;
        border-radius: 2px;
        float: left;
        color: #fff;
      }
      &-content {
        // position:relative;
        height: 76px;
        min-width: 240px;
        &-title {
          display: block;
          font-size: 20px;
          padding-top: 10px;
        }
        &-subtitle {
          display: block;
          font-size: 14px;
          color: #999;
          padding-top: 10px;
        }
      }
    }
  }
}
</style>
